<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" >
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="../js/jquery.min.js" ></script>
        <title>九九乘法表</title>
        <style>
            body{
                display: flex;
                flex-flow: column;
                justify-content: center;
            }
            .tbl{
                border: 2px solid black;
                width: 650px;
                height: 320px;
                flex-flow: left;
                margin-top: 10px;
                margin-bottom: 40px;
            }
            span{
                border: solid 1px;
                margin-left: 5px;
            }
            .tb2{
                display:inline-flex;
            }
            .tb2 div{
                text-align: center;
                width: 380px;
                height: 320px;
                border-radius: 22px;
                border: solid 1px;
            }
            .tb2 img{
                width: 100px;
                height: 100px;
            }
            .frm{
                margin: 50px auto 20px auto;
                display: flex;
            }
            .frm input[type="text"]{
                width: 350px;
                border:solid 5px;
                border-radius: 22px;
                text-align: center;
                outline: none;
            }
            input[type="button"]{
                border: solid 3px;
                border-radius: 22px;
                cursor: pointer;
            }
            nav{
                text-align: left;
                display: block;
                background-color: rgb(119, 182, 245);
                height: 30px;
                border-bottom: 1px solid #333;
            }
            nav ul{
                padding: 0;
                margin: 0;
                list-style: none;
            }
            nav ul li{
                float: left;
                margin-left: 20px;
            }
            nav ul li:hover{
                background-color: rgb(248, 247, 247);
            }
            nav a:link,nav a:visited{
                display: block;
                text-decoration: none;
                font-weight: bold;
                margin: 5px;
                color: #0e0c0c;
            }
            nav a:hover{
                color: #0e0c0c;
            }
            .inform p{
                font-size: large;
            }
            .navbar-toggle {
                height: 30px;
                width: 30px;
                display: none;
                border: none;
                background-color: rgb(28, 235, 235);
                border-radius: 2px;
                cursor: pointer;
            }
            .navbar-toggle span {
                display: block;
                width: 15px;
                margin: 2px 0;
                border-bottom: 1px solid rgb(1, 6, 10);
            }
            @media(max-width: 768px) {
            nav {
                display: block;
            }
            .navbar-header {
                margin-top: 6.5px;
            }  
            .navbar-toggle {
                display: flex;
                flex-flow: column;
                justify-content: center;
                align-items: center;
            }
            .collapse {
                display: none;
            } 
            .navbar-collapse {
                position: relative;
                top: 26.5px;
            }
            .navbar-collapse li {
                width: 100%;
                border-bottom: 1px solid #fff;;
                text-align: left;
            }
            }
        </style>
    </head>
    <body>
        <nav>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#one">九九乘法表</a></li>
                    <li><a href="#two">科学家简介</a></li>
                    <li><a href="#three">与我联系</a></li>
                </ul>
            </div>
            <button class="navbar-toggle" type="button">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </nav>
        <h2 style="text-align: left;"id=one>九九乘法表</h2>
        <div class="tbl" id="tbl">
            <script>
                $(document).ready(function(){
                    for(var i=1;i<=9;i++){
                        for(var j=1;j<=i;j++){
                        var table1=document.getElementById("tbl");
                        var newp=document.createElement("span");
                        let result=i*j;
                        table1.appendChild(newp);
                        newp.innerHTML=i+"*"+j+"="+result+" ";
                        }
                        var newp2=document.createElement("p");
                        table1.appendChild(newp2);
                    }
                });
            </script>   
        </div>
        <script>
            var toggleBtn = document.querySelector('.navbar-toggle')
            var collapsedElm = document.querySelector('.navbar-collapse')
            toggleBtn.addEventListener('click', function(){
                collapsedElm.classList.toggle('collapse')})
        </script>
        <div style="text-align: left;">
            <input id="btn1" type="button" value="变换形态" >
            <input id="btn2" type="button" value="恢复形态" >
        </div>
        <script>
            $("#btn1").click(function(){
                $("body").css("text-align","right");
            });
            $("#btn2").click(function(){
                $("body").css("text-align","none");
            });
        </script>
        <h2 style="text-align: left;" id=two>物理学家简介</h2>
        <div class="tb2">
            <div class="tbb1">
                <p>Edison</p>
                <img src="../images/ads.jpg" >
                <p>托马斯·阿尔瓦·爱迪生(英文名:Thomas Alva Edison，1847年-1931年)，世界著名的发明家、物理学家、企业家，拥有众多知名重要的发明专利超过2000项，被传媒授予“门洛帕克的奇才”称号!他是人类历史上第一个利用大量生产原则和电气工程研究的实验室来进行从事发明专利而对世界产生重大深远影响的人。</p>
            </div>
            <div class="tbb2">
                <p>Leibniz</p>
                <img src="../images/lbnc.jpg" >
                <p>戈特弗里德·威廉·莱布尼茨（英文名:Gottfried Wilhelm Leibniz，1646年7月1日－1716年11月14日），德意志哲学家、数学家，历史上少见的通才，被誉为17世纪的亚里士多德。</p>
            </div>
            <div class="tbb3">
                <p>newton</p>
                <img src="../images/newton.PNG" >
                <p>艾萨克·牛顿（1643年1月4日—1727年3月31日）爵士，英国皇家学会会长，英国著名的物理学家，百科全书式的“全才”，著有《自然哲学的数学原理》、《光学》。</p>
            </div>
            <div class="tbb4">
                <p>Tesla</p>
                <img src="../images/tsl.jpg" >
                <p>尼古拉·特斯拉（Nikola Tesla，1856年7月10日—1943年1月7日），塞尔维亚裔美籍发明家、物理学家、机械工程师、电气工程师。</p>
            </div>
        </div>
        <div class="inform" id="three" style="text-align: left;">
            <h2>与我联系</h2>
            <p>
                姓名：王玉龙<br>
                地址：信阳师范学院<br>
                电话：18737413956<br>
                邮箱：3036956003@qq.com<br>
            </p>
            <form name="input" action="" method="get">
                提交反馈: <input type="text" name="user">
                <input type="submit" value="Submit">
            </form>
        </div>
    </body>
</html>